<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,userscalable=no">
	<script>
			// var rem = document.documentElement.clientWidth/14.4
			document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth/14.4+"px";
			addEventListener("resize",function(){
				document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth/14.4 +"px";
			},false)
	</script>
	<title>qq音乐</title>
	<link rel="stylesheet" href="style/iconfont.css"/>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		html,body{
			width: 100%;
			height: 100%;
		}
		@-webkit-keyframes ani{
			0%{
				-webkit-transform: rotate(0deg);
			}
			100%{
				-webkit-transform: rotate(1turn);
			}
		}
		.iconfont{
			color: #A7A7A7;
		}
		#wrapper{
			width: 100%;
			height: 100%;
			position: relative;
		}
		#wrapper .bg{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -5;
			-webkit-filter:blur(30px);
		}
		#header{
			width: 14.4rem;
			height: 2.8rem;
		}
		#header .header_icon1{
			float: left;
			width: 2.5rem;
			height: 2.06rem;
			font-size: 0.35rem;
			text-align: center;
			padding-top: 0.74rem;
		}
		#header .header_icon1:before{
			content: "\e600";
		}
		#header .header_icon2{
			float: right;
			width: 2.5rem;
			height: 2.06rem;
			font-size: 0.35rem;
			text-align: center;
			padding-top: 0.74rem;
		}
		#header .header_icon2:before{
			content: "\e601";
		}
		#header .name{
			width: 9.4rem;
			height: 2.8rem;
			float: left;
		}
		#header .name span{			
			display: block;
			text-align: center;			
			/*color: #F5F5F5;*/
		}
		#header .name span:first-child{
			height: 1.8rem;
			line-height: 1.8rem;
			font-size: 0.55rem;
		}
		#header .name span:last-child{
			height: 1rem;
			line-height: 1rem;			
			font-size: 0.36rem;
		}
		#header .name span:last-child i{
			display: inline-block;
			height: 0.16rem;
			line-height:0.16rem;
			padding: 0.64rem 0.8rem;
		}
		#header .name span:last-child i:before{
			content: "\e607";
		}
		nav{
			width: 11rem;
			height: 0.7rem;
			overflow: hidden;
			padding: 0 1.7rem;
			padding-top: 0.4rem;
		}
		nav div{
			float: left;
			width: 1.8rem;
			height: 0.58rem;
			line-height: 0.58rem;
			border: 0.01rem solid #31C27C;
			text-align: center;
			font-size: 0.4rem;
			color: #31C27C;
			border-radius: 3px;
			margin-left: 0.7rem;
		}
		nav div:last-child{
			border-color: #BBBEC0;
			color: #BBBEC0;
			font-weight: bolder;
		}
		nav div:first-child{
			text-align: left;
			padding-left: 0.2rem;
			overflow: hidden;
		}
		nav .s1{
			display: inline-block;
			width: 0.56rem;
			height: 0.58rem;
			line-height: 0.58rem;
			float: right;
			text-align: center;
			margin-right: 0.1rem;
			color: #31C17B;
		}
		figure{
			width: 12rem;
			height: 13.8rem;
			padding: 0.2rem 1.2rem;
			position: relative;
			margin-top: 0.4rem;
			overflow: hidden;
		}
		figure div{
			width: 12.4rem;
			height: 12.4rem;
			border-radius: 100%;
			background: rgba(0,0,0,.8);
			position: absolute;
			top: 0;
			left: 1rem;
			z-index: -1;
		}
		figure img{
			display: block;
			width: 12rem;
			height: 12rem;
			border-radius: 100%;
			/*box-shadow: 0 0 0.2rem rgba(0,0,0,.8);*/
			-webkit-animation: ani 20s linear infinite;
			-webkit-animation-play-state: paused;
		}
		.ani{
			animation: ani 6s linear infinite;
		}
		figure figcaption{
			text-align: center;
			color: #35AC72;
			margin-top: 0.9rem;
		}
		.progress{
			width: 14.4rem;
			height: 1.9rem;
			overflow: hidden;
		}
		.progress div{
			float: left;
			height: 1.9rem;
		}
		.progress .start,.end{
			width: 2.3rem;
			line-height: 1.9rem;
			text-align: center;
			font-size: 0.28rem;
			color: #ADACAD;
		}
		.progress .box{
			width: 9rem;
			height: 0.1rem;
			margin: 0.9rem 0.4rem;
			background: #949394;
			position: relative;
		}
		.progress .box .play_length{
			width: 0;
			height: 0.1rem;
			background: #31C27C;
		}
		.progress .box .ball{
			width: 0.56rem;
			height: 0.56rem;
			background: #31C27B;
			border-radius: 100%;
			position: absolute;
			left: 0;
			top: -0.28rem;
		}
		.bofang{
			width: 7.8rem;
			height: 2.5rem;
			padding: 0.1rem 3.3rem;
			overflow: hidden;
		}
		.bofang div{
			float: left;
		}
		.bofang .prev,.next{
			width: 1.3rem;
			height: 1.3rem;
			border: 0.06rem solid #31C27C;
			border-radius: 100%;
			line-height: 1.3rem;
			text-align: center;
			color: #31C27C;
			font-size: 0.42rem;
			margin-top: 0.4rem;
		}
		.bofang .pause{
			width: 2rem;
			height: 2rem;
			line-height: 2rem;
			text-align: center;
			border: 0.06rem solid #31C27C;
			border-radius: 100%;
			color: #31C27C;
			font-size: 0.84rem;
			margin: 0 1.4rem;
		}
		.footer{
			width: 14.4rem;
			height: 2.4rem;
			display:-webkit-box;
			display: flex;
			flex-direction:row;
			flex-grow: 1;
			justify-content: space-around;
			align-items: center;
		}
		.footer div{
			flex-basis: 2.88rem;
			text-align: center;
			font-size: 1rem;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<img src="yangzai.jpg" alt="" class="bg">
		<header id="header">
			<div class="iconfont header_icon1"></div>
			<div class="name"><span>祝新婚快乐</span><span><i class="iconfont"></i>苑弘扬&费若男<i class="iconfont"></i></span></div>
			<div class="iconfont header_icon2"></div>
		</header>
		<nav>
			<div>标准<i class="iconfont s1">&#xe600;</i></div>
			<div>独家</div>
			<div>MV</div>
			<div>DTS</div>
		</nav>
		<figure>
			<div></div>
			<img src="yangzai1.jpg" alt="" class="img">				
			<figcaption>作：孔 硕</figcaption>
		</figure>
		<section class="progress">
			<audio src="齐晨 - 咱们结婚吧.mp3" loop id="ad"></audio>
			<div class="start">00:00</div>
			<div class="box">
				<div class="play_length"></div>
				<div class="ball"></div>
			</div>
			<div class="end">00:00</div>
		</section>
		<section class="bofang">
			<div class="iconfont prev">&#xe60a;</div>
			<div class="iconfont pause">&#xe60b;</div>
			<div class="iconfont next">&#xe609;</div>
		</section>
		<footer class="footer">
			<div class="iconfont f1">&#xe603;</div>
			<div class="iconfont f2">&#xe602;</div>
			<div class="iconfont f3">&#xe605;</div>
			<div class="iconfont f4">&#xe604;</div>
			<div class="iconfont f5">&#xe606;</div>
		</footer>
	</div>
</body>
	<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
	<script>
		jq=$.noConflict();
	</script>
	<script type="text/javascript" src="js/zepto.js"></script>
	<script type="text/javascript" src="js/event.js"></script>
	<script type="text/javascript" src="js/touch.js"></script>
	<script>

		var ad = document.getElementById('ad');
		ad.addEventListener("timeupdate", function(){
			var left =ad.currentTime/ad.duration*$('.box').width() + "px";
				$('.play_length').css("width",left);
				$('.ball').css("left",left);
				var other = ad.duration % 3600;
				var minute = Math.floor (other / 60)>=10?Math.floor (other / 60):"0"+Math.floor (other / 60);
				var second = parseInt((other % 60).toFixed (2));
				$('.end').text(minute+":"+second);

				var other1= ad.currentTime % 3600;
				var minute1 = Math.floor (other1 / 60)>=10?Math.floor (other1 / 60):"0"+Math.floor (other1 / 60);
				var second1 = parseInt((other1 % 60).toFixed (2))>=10?parseInt((other1 % 60).toFixed (2)):"0"+parseInt((other1 % 60).toFixed (2));
				$('.start').text(minute1+":"+second1);
		});

			jq('.ball').on("touchstart",function(ev){
			var e = ev.originalEvent.changedTouches[0];
			var offLeft = jq('.box').offset().left;
			jq(document).on("touchmove",function(ev){
				var e = ev.originalEvent.changedTouches[0];
				var left =e.clientX -offLeft;
				if(left<=0){
					left=0;
				};
				if(left>=jq('.box').width()){
					left=jq('.box').width();
				}
				jq('.ball').css("left",left+"px");

				ad.currentTime = ( left/jq('.box').width() )*ad.duration;
				e.preventDfault;
				return false;
			});
			$(document).on("touchend",function(){
				$(document).off("touchend");
				$(document).off("touchmove");
			});
		})
			var flag = true;
			jq('.pause').on("touchstart",function(){
				if(flag){
					ad.play();
					flag = false;
					jq('.pause').html("&#xe608;");
						if(navigator.userAgent.indexOf("iphone")!=-1){
							jq('.img').addClass('ani');	
						}else{
							jq('.img').css("animation-play-state","running");
						}
				}else{
					ad.pause();
					flag = true;
					jq('.pause').html("&#xe60b;")
					if(navigator.userAgent.indexOf("iphone")!=-1){
						jq('.img').removeClass('ani');	
					}else{
						jq('.img').css("animation-play-state","paused");
					}
				}
			})

	</script>
</html>